<template>
  <el-avatar :size="size" :src="avatar" :shape="shape" />
</template>

<script setup>
import { computed, toRefs } from "vue";
import { useState } from "@/utils/hooks/useMapper";
// <Portrait />
// eslint-disable-next-line no-undef
const props = defineProps({
  size: {
    type: Number,
    default: 24,
  },
  shape: {
    type: String,
    default: "circle", // 'circle' | 'square'
  },
});
const circleUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
const { size, shape } = toRefs(props);
const { userProfile } = useState({
  userProfile: (state) => state.user.currentUserProfile,
});

const avatar = computed(() => {
  return userProfile.value.avatar || circleUrl;
});
</script>

<style lang="scss" scoped></style>
